<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<div class="left-panel-search">
					<el-form ref="search" :model="search" :inline="true" style="padding-top: 20px;">
						<el-form-item label="订单号">
							<el-input v-model="search.orderNo"></el-input>
						</el-form-item>
						<el-form-item label="支付方式">
							<el-select v-model="search.payWay" placeholder="请选择">
								<el-option
								v-for="item in options"
								:key="item.value"
								:label="item.label"
								:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="查询日期范围">
							<el-date-picker
								v-model="search.dateRange"
								type="datetimerange"
								unlink-panels
								value-format="YYYY-MM-DD HH:mm:ss"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期">
							</el-date-picker>
						</el-form-item>
					</el-form>
					<el-button type="primary" icon="el-icon-search" @click="upsearch">查询</el-button>
				</div>
			</div>
			<div class="right-panel">
				
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="list.apiObj" row-key="id" @selection-change="selectionChange" stripe>
				<el-table-column type="expand">
					<template #default="props">
						<div style="padding-left: 50px;font-size: 14px;width: 1200px;">
							<el-form ref="searchDetail" style="padding-top: 20px;">
								<el-form-item label="平台订单号:">{{ props.row.orderNo }}</el-form-item>
								<el-form-item label="商户订单号:">{{ props.row.outOrderNo }}</el-form-item>
								<el-form-item label="所属商户:">{{ props.row.merchantName }}</el-form-item>
							</el-form>
							<h3 v-if="props.row.refundRecords.length > 0">退款记录</h3>
							<el-table :data="props.row.refundRecords" :max-height="300" v-if="props.row.refundRecords.length > 0">
								<el-table-column label="平台退款单号" prop="refundNo" />
								<el-table-column label="商户退款单号" prop="outRefundNo" />
								<el-table-column label="退款金额" prop="amount" :formatter="formatAmount"/>
								<el-table-column label="退款状态" prop="refundStatus">
									<template #default="scope">
										<el-tag effect="plain" v-if="scope.row.refundStatus==0">受理中</el-tag>
										<el-tag effect="plain" type="success" v-if="scope.row.refundStatus==1">退款成功</el-tag>
										<el-tag effect="plain" type="danger" v-if="scope.row.refundStatus==2">退款失败</el-tag>
									</template>
								</el-table-column>
								<el-table-column label="申请退款时间" prop="refundCreatedTime" />
								<el-table-column label="完成退款时间" prop="refundFinishTime" />
							</el-table>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="订单号" prop="orderNo" width="180"></el-table-column>
				<el-table-column label="金额(元)" prop="amount" width="150" :formatter="formatAmount"></el-table-column>
				<el-table-column label="支付场景" prop="payScen" width="250" :filters="payScenFilters" :filter-method="filterHandler">
					<template #default="scope">
						<el-tag type="" class="mx-1" effect="light" v-if="scope.row.payScen==10">扫码支付</el-tag>
						<el-tag type="success" class="mx-1" effect="light" v-if="scope.row.payScen==11">付款码支付</el-tag>
						<el-tag type="info" class="mx-1" effect="light" v-if="scope.row.payScen==12">APP支付</el-tag>
						<el-tag type="danger" class="mx-1" effect="light" v-if="scope.row.payScen==13">手机网站支付</el-tag>
						<el-tag type="warning" class="mx-1" effect="light" v-if="scope.row.payScen==14">PC网站支付</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="支付方式" prop="payWay" width="250" :filters="payWayFilters" :filter-method="filterHandler">
					<template #default="scope">
						<el-tag type="" class="mx-1" effect="dark" v-if="scope.row.payWay==1">支付宝</el-tag>
						<el-tag type="success" class="mx-1" effect="dark" v-if="scope.row.payWay==2">微信</el-tag>
						<el-tag type="info" class="mx-1" effect="dark" v-if="scope.row.payWay==3">银联</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="状态" prop="status" width="150" :filters="statusFilters" :filter-method="filterHandler">
					<template #default="scope">
						<el-tag effect="plain" v-if="scope.row.status==0">待支付</el-tag>
						<el-tag effect="plain" type="success" v-if="scope.row.status==1">支付成功</el-tag>
						<el-tag effect="plain" type="info" v-if="scope.row.status==2">已取消</el-tag>
						<el-tag effect="plain" type="info" v-if="scope.row.status==3">已超时</el-tag>
						<el-tag effect="plain" type="warning" v-if="scope.row.status==4">支付失败</el-tag>
						<el-tag effect="plain" type="danger" v-if="scope.row.status==5">部分退款</el-tag>
						<el-tag effect="plain" type="danger" v-if="scope.row.status==6">全额退款</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="下单时间" width="250">
					<template #default="scope">
						<div style="display: flex; align-items: center">
						<el-icon><timer /></el-icon>
						<span style="margin-left: 10px">{{ scope.row.createdOrderTime }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="支付时间" width="250">
					<template #default="scope">
						<div style="display: flex; align-items: center">
						<el-icon><timer /></el-icon>
						<span style="margin-left: 10px">{{ scope.row.payOrderTime }}</span>
						</div>
					</template>
				</el-table-column>
				<!-- <el-table-column label="操作" fixed="right" align="center" width="100">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
						</el-button-group>
					</template>
				</el-table-column> -->
			</scTable>
		</el-main>
	</el-container>

	<el-drawer v-model="dialog.info" :size="800" title="详细" direction="rtl" destroy-on-close>
		<el-form ref="infoSearch" :model="infoSearch" :inline="true" :disabled="true" style="padding-top: 20px;">
            <el-form-item label="平台订单号">
                <el-input v-model="infoSearch.orderNo"></el-input>
            </el-form-item>
            <el-form-item label="支付方式">
                <el-select v-model="infoSearch.payWay" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
			<el-form-item label="金额(元)">
                <el-input v-model="infoSearch.amount"></el-input>
            </el-form-item>
			<el-form-item label="商户订单号">
                <el-input v-model="infoSearch.orderNo"></el-input>
            </el-form-item>
			<el-form-item label="所属商户">
                <el-input v-model="infoSearch.orderNo"></el-input>
            </el-form-item>
        </el-form>
	</el-drawer>
</template>

<script>
	import { Timer } from '@element-plus/icons-vue'

	export default {
		name: 'listOrder',
		components: {
			Timer
		},
		data() {
			return {
				dialog:{
					info: false
				},
				list: {
					apiObj: this.$API.order.page,
					stripe: true
				},
				selection: [],
				search: {
					orderNo: "",
					payWay: null,
					dateRange: null
				},
				infoSearch: {
					orderNo: "13231",
					payWay: '1'
				},
				options: [
					{
						value: '1',
						label: '支付宝'
					}, {
						value: '2',
						label: '微信'
					}, {
						value: '3',
						label: '银联'
					}
				],
				payWayFilters: [
					{text: '支付宝', value: '1'},
					{text: '微信', value: '2'},
					{text: '银联', value: '3'}
				],
				statusFilters: [
					{text: '待支付', value: '0'},
					{text: '支付成功', value: '1'},
					{text: '已取消', value: '2'},
					{text: '已超时', value: '3'},
					{text: '支付失败', value: '4'},
					{text: '部分退款', value: '5'},
					{text: '全额退款', value: '6'}
				],
				payScenFilters: [
					{text: '扫码支付', value: '10'},
					{text: '付款码支付', value: '11'},
					{text: 'APP支付', value: '12'},
					{text: '手机网站支付', value: '13'},
					{text: 'PC网站支付', value: '14'}
				]
			}
		},
		mounted() {

		},
		methods: {
			
			//查看
			table_show(){
				this.dialog.info = true
			},
			//表格选择后回调事件
			selectionChange(selection){
				this.selection = selection
			},
			//本地更新数据
			handleSaveSuccess(){
				this.$refs.table.refresh()
			},
			upsearch(){
				var params = {
					orderNo: this.search.orderNo,
					payWay: this.search.payWay,
					startTime: null,
					endTime: null
				}
				if(this.search.dateRange && this.search.dateRange.length == 2){
					params.startTime = this.search.dateRange[0]
					params.endTime = this.search.dateRange[1]
				}
				this.$refs.table.upData(params)
			},
			filterHandler(value, row, column){
				const property = column['property']
				return row[property] === value
			},
			formatAmount(row, column){
				if(column.property == 'amount'){
					return row.amount ? (row.amount/100) : row.amount;
				}else{
					return row[column.property];
				}
			}
		}
	}
</script>

<style>
.left-panel-search {display: flex;align-items: center;}
.left-panel-search > * + * {margin-right:10px;}
</style>
